<template>
  <div class="hello">
    <h2>医药模块</h2>
   <!-- <h1>{{ msg }}</h1> -->
     <el-container>
       <el-header>
         <el-row>
           <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
             <el-input v-model="input" placeholder="请输入药品">
             </el-input>
           </el-col>
           <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
             <el-button type="primary" @click="toclick()">查询药品</el-button>
           </el-col>
           <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
             <el-button type="primary" @click="toGetDrugs()">新增药品</el-button>
           </el-col>
           <!-- 点击新增，弹出弹窗 -->
           <el-dialog :visible.sync="dialogVisible">
             <span>新增药品信息</span>
             <el-form :model="addDrugForm" label-width="85px">
               <el-form-item label="药品编码">
                 <el-input v-model="addDrugForm.drugsCode"></el-input>
               </el-form-item>
             </el-form>
             <el-form :model="addDrugForm" label-width="85px">
               <el-form-item label="药品名称">
                 <el-input v-model="addDrugForm.drugsName"></el-input>
               </el-form-item>
             </el-form>
             <el-form :model="addDrugForm" label-width="85px">
               <el-form-item label="药品助记码">
                 <el-input v-model="addDrugForm.mnemonicCode"></el-input>
               </el-form-item>
             </el-form>
             <el-form :model="addDrugForm" label-width="85px">
               <el-form-item label="药品规格">
                 <el-input v-model="addDrugForm.drugsFormat"></el-input>
               </el-form-item>
             </el-form>
             <el-form :model="addDrugForm" label-width="85px">
               <el-form-item label="药品单位">
                 <el-input v-model="addDrugForm.drugsUnit"></el-input>
               </el-form-item>
             </el-form>
             <el-form :model="addDrugForm" label-width="85px">
               <el-form-item label="药品单价">
                 <el-input v-model="addDrugForm.drugsPrice"></el-input>
               </el-form-item>
             </el-form>
            </el-form>
            <el-form :model="addDrugForm" label-width="80px">
              <el-form-item label="药品剂型">
                <el-select v-model="addDrugForm.drugsDosageId" placeholder="请选择药品剂型">
                  <el-option
                    v-for="item in drugsDosage"
                    :key="item.ID"
                    :label="item.ConstantName"
                    :value="item.ID">
                    <span style="float: left">{{ item.ConstantName }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.ConstantCode }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="药品类型">
                <el-select v-model="addDrugForm.drugsTypeId" placeholder="请选择药品类型">
                  <el-option
                    v-for="item in drugsType"
                    :key="item.ID"
                    :label="item.ConstantName"
                    :value="item.ID">
                   <span style="float: left">{{ item.ConstantName }}</span>
                 </el-option>
               </el-select>
             </el-form-item>
            </el-form>
             <span solt="footer" class="dialog-footer">
               <el-button @click="dialogVisible = false">取 消</el-button>
               <el-button type="primary" @click="addNewDrug()">确 定</el-button>
             </span>
           </el-dialog>
           <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
             <el-button type="primary">导入药品</el-button>
           </el-col>
         </el-row>
       </el-header>
     </el-container>

    <el-row>
      <el-col :span='24'>
         <el-table :data="msg" style="width: 100%">
           <el-table-column prop="drugsCode" label="药品编码"></el-table-column>
           <el-table-column prop="drugsName" label="药品名称"></el-table-column>
           <el-table-column prop="drugsFormat" label="药品规格"></el-table-column>
           <el-table-column prop="drugsUnit" label="药品单位"></el-table-column>
           <el-table-column prop="drugsPrice" label="药品单价"></el-table-column>
           <!-- <el-table-column prop="constantName" label="药品剂型"></el-table-column>
           <el-table-column prop="constantName" label="药品类型"></el-table-column> -->
           <el-table-column prop="delMark" label="操作">
             <template slot-scope="scope">
               <!-- 给后端发送id，根据id查询相应的值 ，弹出对话框-->
               <el-button type="primary" size="mini" @click="toUpdateDrug(scope.$index, scope.row)">编辑</el-button>
               <el-dialog :visible.sync="updateDialogVisible">
                 <span>编辑药品</span>
                 <el-form :model="updateDrugForm" label-width="80px">
                   <el-form-item label="药品编码">
                     <el-input v-model="updateDrugForm.drugsCode"></el-input>
                   </el-form-item>
                 </el-form>
                 <el-form :model="updateDrugForm" label-width="80px">
                   <el-form-item label="药品名称">
                     <el-input v-model="updateDrugForm.drugsName"></el-input>
                   </el-form-item>
                 </el-form>
                 <el-form :model="updateDrugForm" label-width="80px">
                   <el-form-item label="药品单价">
                     <el-input v-model="updateDrugForm.drugsPrice"></el-input>
                   </el-form-item>
                   <el-form-item label="药品剂型">
                     <el-select v-model="updateDrugForm.drugsDosageId" placeholder="请选择药品剂型">
                       <el-option
                         v-for="item in drugsDosage"
                         :key="item.ID"
                         :label="item.ConstantName"
                         :value="item.ID">
                         <span style="float: left">{{ item.ConstantName }}</span>
                         <span style="float: right; color: #8492a6; font-size: 13px">{{ item.ConstantCode }}</span>
                       </el-option>
                     </el-select>
                   </el-form-item>
                 </el-form>
                 <span solt="footer" class="dialog-footer">
                     <el-button @click="updateDialogVisible = false">取 消</el-button>
                     <el-button type="primary" @click="updateDrug()">确 定</el-button>
                 </span>
               </el-dialog>
               <el-button size="mini" type="danger">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span='24'>
        <el-pagination
          background
          layout="prev, pager, next"
          :hide-on-single-page="pageShow"
          :total="totalNumber"
          @current-change="pageChange">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {postRequest} from '../../utils/ajaxapi'
  import {getRequest} from '../../utils/ajaxapi'

  export default {
    mounted:function(){
      this.getAllDrugs(1,10,'');
    },
    data() {
      return {
        pageShow:false,
        totalNumber:0,
        msg:[{
          drugsCode:'',
          drugsName:'',
          drugsFormat:'',
          drugsUnit:'',
          drugsPrice:'',
          delMark:''
        }],
        input: '',
        updateDialogVisible:false,
        updateDrugForm:[{
          drugsName:'',
          drugsCode:'',
          drugsPrice:'',
          drugsDosageId:''
        }],
        dialogVisible:false,
        addDrugForm:{
          drugsName:'',
          drugsCode:'',
          drugsPrice:'',
          mnemonicCode:'',
          drugsFormat:'',
          drugsUnit:''
        },
        drugsDosage:[{
          ConstantCode:"",
          ConstantTypeID:'',
          ConstantName:"",
          ID:'',
          DelMark:''
        }],
        drugsType:[{
          ConstantCode:"",
          ConstantTypeID:'',
          ConstantName:"",
          ID:'',
          DelMark:''
        }]
      }
    },
    methods:{
      toUpdateDrug(index,clickdrug){
        this.updateDialogVisible = true;
        this.updateDrugForm = this.msg[index];
        //或this.updateDrugForm.drugsName = this.drugsTables[index].drugsName;
        this.getDrugs();
      },
      pageChange(index){
        this.getAllDrugs(index,10,'');
      },
      toclick(){
        if(this.input == null){
          this.input = '';
        }
        this.getAllDrugs(1,10,this.input);
      },
      getAllDrugs(pageNumber,pageSize,drugName){
        let _this = this;
        getRequest("/neupha/getAllDrugs?pageNumber="+pageNumber+
          "&pageSize="+pageSize+
          "&drugsName="+drugName)
        .then(response => {
          _this.msg = response.data.map;
          _this.totalNumber = response.data.pageNumber;
        })
      },
      addNewDrug(){
        //新增药品
        let _this = this;
        postRequest("/neupha/addNewDrug",this.addDrugForm)
        .then(function (response) {
          //后端传入药品名称
          _this.addDrugForm.drugsName = response.data.drugsName
        })
      },
      toGetDrugs(){
        this.dialogVisible = true;
        this.getDrugs();
      },
      getDrugs(){
        let _this = this;
        getRequest("/constantItem/getConstantItemByTypeId?typeId=11")
        .then(function(response){
          _this.drugsDosage = response.data;
        });
        getRequest("/constantItem/getConstantItemByTypeId?typeId=10")
        .then(function(response){
          _this.drugsType = response.data;
        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
</style>
